<template>
  <div>
    <div class="page_space">
      <input-card class="mt-15">
        <inputItem
          :content="params.placeIdName"
          title="所属区划/快检点"
          tip="请选择所属区划/快检点"
          type="select"
          @select="show = true"
        />
        <inputItem
          v-model="params.brand"
          title="生产厂家/品牌"
          tip="请输入生产厂家/品牌"
          type="input"
        />
        <inputItem
          v-model="params.batch"
          title="生产批次"
          tip="请输入生产批次"
          type="input"
        />
        <inputItem
          v-model="params.inventoryBatch"
          title="入库批次"
          tip="请输入经营主体"
          type="input"
        />
      </input-card>
    </div>
    <div class="btn_wrap">
      <button class="btn default middle" @click="reset">重置</button>
      <button class="btn middle" @click="submit">提交</button>
    </div>

    <van-popup v-model="show" position="bottom" :round="true">
      <van-picker
        ref="pickerForType"
        title="请选择所属区划/快检点"
        show-toolbar
        :columns="areaList"
        visible-item-count="3"
      />
      <div class="btn_box">
        <button class="btn large" @click="confirmArea4">确定</button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import inputCard from '@/components/input-card/card'
import inputItem from '@/components/input-card/item'
import { getArea } from '@/api/detection'

export default {
  name: 'productSearch',
  components: {
    inputCard,
    inputItem
  },
  data() {
    return {
      show: false,
      params: {
        placeIdName: '',
        placeId: '',
        brand: '',
        batch: '',
        inventoryBatch: ''
      },
      list: [],
      areaList: []
    }
  },
  created() {
    this.getArea()
  },
  methods: {
    // 确定类型
    confirmArea4() {
      let { value, text } = this.$refs.pickerForType.getValues()[0]
      this.show = false
      this.params.placeId = value
      this.params.placeIdName = text
    },
    // 获取快检点信息
    async getArea() {
      const { code, data } = await getArea({
        buildControls: 'needBuildOwnerName',
        limit: 50,
        page: 1
      })
      if (code === '0') {
        data.content.forEach((item) => {
          this.areaList.push({
            text: item.name,
            value: item.id
          })
        })
      }
    },
    // 重置
    reset() {
      for (let item in this.params) {
        this.params[item] = ''
      }
    },
    // 提交
    submit() {
      this.$router.replace({
        name,
        query: {
          searchInfo: encodeURIComponent(JSON.stringify(this.params))
        }
      })
    }
  }
}
</script>
